<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>费用类型</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>

    <style>
        * {
            font-family: "Microsoft Yahei" !important;
            overflow-y: hidden;
        }

        nav button {
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
        }

        nav div {
            float: right !important;
            margin: 15px;
        }

        nav {
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }

        .layui-tab {
            margin: 0;
        }

        .content {
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }

        .layui-tab-content {
            background-color: #F5F7FA;
        }

        .search {
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }

        .allBtn {
            float: left !important;
            margin-top: 10px;
            width: 70px;

            border: none;
            background: #fafbfc;
        }

        .screen {
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }

        .one {
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }

        div .layui-input-inline {
            padding-left: 25px;
        }

        .layui-nav-tree {
            width: 100%;
            padding: 0;
        }

        .sanji {
            display: none;
            font-size: 15px;
        }

        .sanji li {
            padding: 10px 0px;
            margin-left: 10px;
        }

        .sanji button {
            float: right;
            margin-right: 60px;
        }

        .click_erji img {
            padding-top: 10px;
            float: left;
        }

        .click_erji h1 {
            float: left;
            width: 80%;
            font-size: 15px;
            padding: 10px;
            margin-left: 5px;
        }
        .sanji li:hover
        {
            background-color:ghostwhite;
        }
    </style>
</head>
<body>
<form class="layui-form layui-row">
    <div class="layui-col-md3" id="leftTree">
        <nav style="border-right: 1px solid #cfdbe2; " class="layui-collapse" lay-filter="leftTree">
            <p style="margin-left:15px ;margin-top: 15px">费用类型
                <button type="button" class="layui-btn layui-btn layui-btn-primary layui-btn layui-btn-sm"
                        style="margin-right: 10px; margin-top: 0px;float: right;">新建类型
                </button>
            </p>
        </nav>
        <div class="chargeDiv" style="border-right: 1px solid #ccc;overflow: auto;">
            <ul class="chargeType">
                <li>
                    <div class="click_erji">
                        <h1>111</h1>
                        <img class="er_img" src="/ui/img/main_img/theme7/down.png"/>
                    </div>
                    <ul class="sanji">
                        <li>
                            <span style="margin-left:6%;">222</span>
                            <button class="layui-btn layui-btn-danger layui-btn-xs del" type="button">删除</button>
                        </li>
                        <li>
                            <span style="margin-left:6%;">222</span>
                            <button class="layui-btn layui-btn-danger layui-btn-xs del" type="button">删除</button>
                        </li>
                        <li>
                            <span style="margin-left:6%;">222</span>
                            <button class="layui-btn layui-btn-danger layui-btn-xs del" type="button">删除</button>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="click_erji">
                        <h1>111</h1>
                        <img class="er_img" src="/ui/img/main_img/theme7/down.png"/>
                    </div>
                    <ul class="sanji">
                        <li>
                            <span style="margin-left:6%;">222</span>
                            <button class="layui-btn layui-btn-danger layui-btn-xs del" type="button">删除</button>
                        </li>
                        <li>
                            <span style="margin-left:6%;">222</span>
                            <button class="layui-btn layui-btn-danger layui-btn-xs del" type="button">删除</button>
                        </li>
                        <li>
                            <span style="margin-left:6%;">222</span>
                            <button class="layui-btn layui-btn-danger layui-btn-xs del" type="button">删除</button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-col-md9">
        <nav>
            <i class="layui-icon layui-icon-prev"
               style="float: left;line-height: 50px;margin-left: 5px;color:#fafbfc "></i>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm iconView"
                    style="float: right;margin-right: 30px">保存
            </button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm delBtn"
                    style="float: right;display: none">删除此类型及其二级类型
            </button>
        </nav>
        <div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <div class="layui-tab-content">
                    <div class="content">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 100px;">费用类型名称</label>
                                <div class="layui-input-block">
                                    <input style="width: 80%;margin-left: 60px" type="text" name="chargeTypeName"
                                           required lay-verify="required" placeholder="请输入费用类型名称" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 100px;">
                                    <pre>序号             </pre>
                                </label>
                                <div class="layui-input-block">
                                    <input style="width: 80%;margin-left: 60px" type="text" name="chargeTypeOrder"
                                           required lay-verify="required" placeholder="序号" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                           <div class="secondLevel">
                               <label class="layui-form-label" style="width: 130px;">添加二级费用类型</label>
                               <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;"
                                       id="AddMoreFileBox">添加更多行
                               </button>
                               <hr>

                               <table class="layui-table " lay-skin="nob" id="InputsWrapper">
                                   <tbody id="addrow">
                                   <tr>
                                       <td></td>
                                       <td>费用类型名称</td>
                                       <td>预警金额</td>
                                       <td>序号</td>
                                       <td>操作</td>
                                   </tr>
                                   </tbody>
                               </table>
                           </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script>
    $('.chargeDiv').height($(window).height() - 20);
    $('.content').height($(window).height() - 130);
    $('.classBtn').click(function () {
        var index = $('.classBtn').index(this);
        $('.content:eq("' + index + '")').css('display', 'block').siblings('.content').css('display', 'none')
        $(this).toggleClass("one");
        $(this).siblings('button').removeClass("one");
    });
    layui.use(['form', 'layedit', 'laydate', 'layedit', 'table', 'element'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , element = layui.element
            , table = layui.table;

        layedit.build('texPart'); //建立编辑器
        form.render();

    });

    $('.iconView').click(function () {
        var childList = [];
        for (var i = 0; i < $('#addrow tr').length - 1; i++) {
            var chargeTypeValue = $('[name="chargeTypeValueC"]').eq(i).val();
            if (chargeTypeValue.split('.')[1] == undefined || chargeTypeValue.split('.')[1] == '') {
                var chargeType = chargeTypeValue + '.00'
            } else {
                var chargeType = chargeTypeValue
            }
            childList[i]= {
                chargeTypeValue:chargeType,
                chargeTypeName : $('[name="chargeTypeNameC"]').eq(i).val(),
                chargeTypeOrder : $('[name="chargeTypeOrderC"]').eq(i).val(),
                chargeTypeParent : $('.removeclass').eq(i).attr('chargeTypeParent'),
                chargeTypeId : $('.removeclass').eq(i).attr('chargeTypeId')
            };
        }
        if($(this).attr('chargeTypeId')!==''&&$(this).attr('chargeTypeId')!==undefined){
            var data = {
                chargeTypeId:$(this).attr('chargeTypeId'),
                chargeTypeName: $('[name="chargeTypeName"]').val(),
                chargeTypeOrder: $('[name="chargeTypeOrder"]').val(),
                childList: childList
            };
        }else{
            var data = {
                chargeTypeName: $('[name="chargeTypeName"]').val(),
                chargeTypeOrder: $('[name="chargeTypeOrder"]').val(),
                childList: childList
            };
        }
        if($('.secondLevel').css('display')=='block'){
            $.ajax({
                url: '/chargeType/saveChargeType',
                type: 'post',
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function () {
                    layer.msg('保存成功！', {icon: 6}, function () {
                        window.location.reload();
                    });
                }
            })
        }else{
            $.ajax({
                url: '/chargeType/editChargeType',
                type: 'post',
                data: {
                    chargeTypeId:$(this).attr('chargeTypeId'),
                    chargeTypeName: $('[name="chargeTypeName"]').val(),
                    chargeTypeOrder: $('[name="chargeTypeOrder"]').val(),
                    chargeTypeParent: $('[name="chargeTypeOrder"]').attr('chargeTypeParent')
                },
                success: function () {
                    layer.msg('保存成功！', {icon: 6}, function () {
                        window.location.reload();
                    });
                }
            })
        }
    });
    $(document).on('click', '.sanji li', function () {
        $('.iconView').attr('chargeTypeId',$(this).children('button').attr('chargeTypeId'));
        $('.delBtn').hide();
        $('.secondLevel').hide();
        $.ajax({
            url: "/chargeType/findChargeTypeById",
            type: "get",
            dataType: 'json',
            data: {
                chargeTypeId: $(this).children('button').attr('chargeTypeId')
            },
            success: function (data) {
                $('[name="chargeTypeName"]').val(data.object.chargeTypeName);
                $('[name="chargeTypeOrder"]').val(data.object.chargeTypeOrder);
                $('[name="chargeTypeOrder"]').attr('chargeTypeParent',data.object.chargeTypeParent);
            }
        });
    });
    $('.delBtn').click(function () {
        var chargetypeid = $(this).attr('chargetypeid')
        layer.confirm('确定要删除该条数据吗？', {
            btn: ['确定', '取消'], //按钮
            title: "删除"
        }, function () {
            $.ajax({
                url: "/chargeType/delChargeType",
                type: "post",
                dataType: 'json',
                data: {
                    chargeTypeId: chargetypeid
                },
                success: function (res) {
                    if (res.flag) {
                        layer.msg('删除成功！', {icon: 6});
                        window.location.reload()
                    }
                }
            });
        }, function () {
            layer.closeAll();
        });
    })
    $(document).on('click', '.click_erji', function () {
        $('.secondLevel').show();
        $('.click_erji').css('background', 'white');
        $(this).css('background', 'gainsboro');
        $('.delBtn').show().attr('chargeTypeId',$(this).children('h1').attr('chargeTypeId'));
        $('.iconView').attr('chargeTypeId',$(this).children('h1').attr('chargeTypeId'));
        $.ajax({
            url: "/chargeType/findChargeTypeByParent",
            type: "get",
            dataType: 'json',
            data: {
                chargeTypeParent: $(this).children('h1').attr('chargeTypeId'),
            },
            success: function (data) {
                $('[name="chargeTypeName"]').val(data.object.chargeTypeName);
                $('[name="chargeTypeOrder"]').val(data.object.chargeTypeOrder);
                var str = ' <tr>' +
                    '<td></td>' +
                    '<td>费用类型名称</td>' +
                    ' <td>预警金额</td>' +
                    ' <td>序号</td>' +
                    ' <td>操作</td>' +
                    '  </tr>'
                for (var i = 0; i < data.object.childList.length; i++) {
                    str += ' <tr><div><td><span>费用类型</span></td><td><input style="width: 200px;" type="text" name="chargeTypeNameC" value="' + data.object.childList[i].chargeTypeName + '" required lay-verify="required" placeholder="请输入费用类别名称" autocomplete="off" class="layui-input"> </td>'
                        + '<td><input style="width: 200px;" name="chargeTypeValueC" value="' + data.object.childList[i].chargeTypeValue + '" required lay-verify="required" placeholder="预警金额" autocomplete="off" class="layui-input" type="text"/></td>'
                        + '<td><input style="width: 200px;" type="text" name="chargeTypeOrderC" value="' + data.object.childList[i].chargeTypeOrder + '" required lay-verify="required" placeholder="序号" autocomplete="off" class="layui-input">   </td>'
                        + ' <td><a href="#" rel="external nofollow" rel="external nofollow" chargeTypeId="' + data.object.childList[i].chargeTypeId + '" chargeTypeParent="' + data.object.childList[i].chargeTypeParent + '" class="removeclass"> <i class="layui-icon layui-icon-close" style="font-size: 25px;"></i></a></td></div></tr>'
                }
                $('#addrow').html(str)
                $(document).on("click", ".removeclass", function (e) { //user click on remove text
                        $(this).parent().parent().remove(); //remove text box

                })
            }
        });
    });
    $(document).on('click', '.del', function () {
        var chargetypeid = $(this).attr('chargetypeid')
        layer.confirm('确定要删除该条数据吗？', {
            btn: ['确定', '取消'], //按钮
            title: "删除"
        }, function () {
            $.ajax({
                url: "/chargeType/delChargeType",
                type: "post",
                dataType: 'json',
                data: {
                    chargeTypeId: chargetypeid
                },
                success: function (res) {
                    if (res.flag) {
                        layer.msg('删除成功！', {icon: 6});
                        window.location.reload()
                    }
                }
            });
        }, function () {
            layer.closeAll();
        });
    });
    $(document).ready(function () {
        var MaxInputs = 20; //maximum input boxes allowed
        var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
        var AddButton = $("#AddMoreFileBox"); //Add button ID
        var x = InputsWrapper.length; //initlal text box count
        $(AddButton).click(function (e) //on add input button click
        {
            if (x <= MaxInputs) //max input box allowed
            {
                //add input box
                $(InputsWrapper).append(
                    '<tr><div><td><span>费用类型</span></td><td><input style="width: 200px;" type="text" name="chargeTypeNameC" required lay-verify="required" placeholder="请输入费用类别名称" autocomplete="off" class="layui-input"> </td>'
                    + '<td><input style="width: 200px;" name="chargeTypeValueC" required lay-verify="required" placeholder="预警金额" autocomplete="off" class="layui-input" type="text"/>   </td>'
                    + '<td><input style="width: 200px;" type="text" name="chargeTypeOrderC" required lay-verify="required" placeholder="序号" autocomplete="off" class="layui-input">   </td>'
                    + ' <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"> <i class="layui-icon layui-icon-close" style="font-size: 25px;"></i></a></td></div></tr>'
                );
                x++; //text box increment
            }
            return false;
        });
        $(document).on("click", ".removeclass", function (e) { //user click on remove text
            if (x > 1) {
                $(this).parent().parent().remove(); //remove text box
                x--; //decrement textbox
            }
            return false;
        })


        $.ajax({
            url: "/chargeType/selectChargeType",
            type: "get",
            dataType: 'json',
            data: {
                type: 'true'
            },
            success: function (data) {
                var str = ''
                for (var i = 0; i < data.obj.length; i++) {
                    str += '<li>' +
                        '<div class="click_erji">' +
                        ' <h1 chargeTypeId=' + data.obj[i].chargeTypeId + '>' + data.obj[i].chargeTypeName + '</h1>' +
                        ' <img class="er_img" src="/ui/img/main_img/theme7/down.png"/>' +
                        ' </div>' +
                        ' <ul class="sanji">' + function () {
                            var childStr = ''
                            for (var j = 0; j < data.obj[i].childList.length; j++) {
                                childStr += ' <li>' +
                                    ' <span style="margin-left:6%;">' + data.obj[i].childList[j].chargeTypeName + '</span>' +
                                    ' <button chargeTypeId=' + data.obj[i].childList[j].chargeTypeId + ' class="layui-btn layui-btn-danger layui-btn-xs del" type="button">删除</button>' +
                                    '  </li>'
                            }
                            return childStr;
                        }() + ' </ul>' +
                        ' </li>'
                }
                $('.chargeType').html(str);
                //点击二级，出现三级
                $('.click_erji').on('click', function () {
                    var san = $(this).siblings().html();
                    if ($(this).siblings('.sanji').css('display') == 'none') {
                        $(this).find('.er_img').attr('src', '/ui/img/main_img/theme7/up.png');
                        $(this).siblings('.sanji').show();

                    } else {
                        $(this).find('.er_img').attr('src', '/ui/img/main_img/theme7/down.png');
                        $(this).siblings('.sanji').hide();
                    }

                });

            }
        });
    });

</script>

</html>